<template>
  <div>
    <div class="top-panel" v-has="proxy.PermissionCode.account.edit">
      <el-card>
        <el-button type="primary"
                   @click="showEdit()"
        >
          新增分类
        </el-button>
      </el-card>
    </div>

    <!-- 内容区域 -->
    <el-card :style="{ height: 'calc(100vh - 192px)',marginTop:'10px'}">
      <template #header>
        <span>用户列表</span>
      </template>
      <Table
          ref="tableInfoRef"
          :columns="columns"
          :fetch="loadDataList"
          :dataSource="tableData"
          :options="tableOptions"
          :extHeight="tableOptions.extHeight"
          :showPagination="false">
        <template #iconPathSlot="{ index,row }">
          <Cover :title="row.categoryName" :bgColor="row.bgColor" :cover="row.iconPath"></Cover>
        </template>
        <template #typeSlot="{ index,row }">
          <span v-if="row.type ==0">问题分类</span>
          <span v-if="row.type==1">考题分类</span>
          <span v-if="row.type ==2">问题/考题分类</span>
        </template>
        <template #opSlot="{ index,row }">
          <div class="row-op-panel"
               v-if="!(userInfo.superAdmin && userInfo.userId === row.userId)">
            <a
                class="a-link"
                href="javascript:void(0)"
                @click="showEdit(row)"
                v-has="proxy.PermissionCode.category.edit"
            >修改</a>
            <a
                class="a-link"
                href="javascript:void(0)"
                @click.prevent="delCategory(row)"
                v-has="proxy.PermissionCode.category.del"
            >删除</a>
            <a
                href="javascript:void(0)"
                @click.prevent="changeSort(index,'up')"
                v-has="proxy.PermissionCode.category.edit"
                :class="[index===0 ?'not-allow':'a-link']"
            >上移</a>
            <a
                :class="[index ==tableData.list.length-1 ? 'not-allow':'a-link']"
                href="javascript:void(0)"
                @click.prevent="changeSort(index,'down')"
                v-has="proxy.PermissionCode.category.edit"

            >下移</a>
          </div>
        </template>
      </Table>
    </el-card>
  </div>
</template>


<script setup>
import {onMounted, ref, getCurrentInstance, nextTick} from "vue";

const {proxy} = getCurrentInstance();
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
const api = {
  loadCategory: "/category/loadAllCategory",
  saveCategory: "/category/saveCategory",
  delCategory: "/category/delCategory",
  changeSort: "/category/changeSort",
}

const tableData = ref({});
const tableOptions = ref({
  extHeight: 125,
})

const columns = [
  {
    width: 150,
    label: "封面",
    prop: "iconPath",
    scopedSlots: "iconPathSlot"
  },
  {
    label: "分类名称",
    prop: "categoryName",
  },
  {
    label: "类型",
    prop: "type",
    scopedSlots: "typeSlot"
  },
  {
    width: 200,
    label: "操作",
    prop: "operation",
    scopedSlots: "opSlot"
  },
]

const tableInfoRef = ref();

const loadDataList = async () => {
  let result = await proxy.Request({
    url: api.loadCategory,
  })
  if (!result) {
    return;
  }
  tableData.value.list = result.data;
}
// 修改分类
const showEdit = () => {
  alert("未开发")
}
// 删除分类
const delCategory = (data) => {
  proxy.Confirm(`你确定要删除分类【${data.categoryName}】吗？`, async () => {
    // let result = await proxy.Request({
    //   url: api.delCategory,
    //   params: {
    //     categoryId: data.categoryId
    //   },
    // })
    // if (!result) {
    //   return;
    // }
    proxy.Message.success("删除成功");
    // loadDataList();
  })
}
// 修改密码
const editPassword = () => {
  alert("没有权限")
}

// 修改顺序
const changeSort = async (index, type) => {
  let dataList = tableData.value.list;
  let len = dataList.length;
  if ((type === 'down' && index === len - 1) || (type === 'up' && index === 0)) {
    return;
  }
  // 修改数据
  let temp = dataList[index];
  let number = type === 'down' ? 1 : -1;
  dataList.splice(index, 1);
  dataList.splice(index + number, 0, temp);

  // 获取修改后的地址
  let categoryIds = dataList.map(item => item.categoryId);
  let result = await proxy.Request({
    url: api.changeSort,
    params: {
      categoryIds
    },
  })
  if (!result) {
    return;
  }

  // 直接修改数据
  tableData.value.list = dataList;
  proxy.Message.success("重新排序成功");
}
</script>


<style scoped lang="scss">
.box-card {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tree-panel {
    overflow: auto;
    height: calc(100vh - 304px);
  }
}
</style>
